<template>
  <div id="RoomInfo" class="page-wrapper">
    <h1 class="main-title">
      基础设置
    </h1>
    <div class="selector-wrapper main-card wrapper">
      <div class="main-card"></div>
      <el-button type="primary" @click="handleSubmitClick">获取数据</el-button>
    </div>
    <div class="wrapper">
      <PanelGroup :roomInfo="roomInfo" :adminName="adminName" />
    </div>
    <!-- 人员信息 -->
    <!-- 宿舍成员 -->
    <div class="wrapper main-card">
      <StudentsTable :table-data="students" />
      <div class="button-wrapper">
        <el-button @click="handleReceiveOrder(scope.row.id)" type="primary"
          >一键收单</el-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import StudentsTable from './components/UserTable'
// import { getstudentinfo ,searchstudentinfo} from '@/api/user'

export default {
  name: 'RoomInfo',
  components: {
    StudentsTable
  },
  data() {
    return {
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      },
      value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
      value2: '',
      templateId: null,
      template: null,
      handUser: false,
      roomuser: false,
      selected: null,
      roomInfo: {},
      adminName: {},
      buildingInfo: {},
      floorInfo: {},
      students: [],
      selectorData: {
        buildingId: null,
        floorId: null,
        roomId: null
      },
      evaluatesData: [],
      evaluateForm: {
        note: '',
        score: 60
      },
      formData: {
        name: '',
        phone: '',
        account: '',
        time: ''
      }
    }
  },

  mounted() {
    this.fetchData()
  },
  methods: {
    // 获取服务器数据
    fetchData() {
      // 数据接口
      // getstudentinfo().then(res => {
      //   this.students=res.data
      // })
    },

    handleSubmitClick() {
      searchstudentinfo(this.formData).then(res => {
        this.students = res.data
      })
    },

    moveUser() {
      this.handUser = true
    }
    //新增
  }
}
</script>

<style lang="scss" scoped>
#RoomInfo {
  .qianru {
    color: #fff;
    background-color: #1890ff;
    float: right;
  }
  > .wrapper {
    margin: 40px 0;
  }

  .selector-wrapper {
    display: flex;
    justify-content: space-between;
  }
  .form-wrapper {
    margin-bottom: 40px;
    .btn-wrapper {
      display: flex;
      flex-direction: row-reverse;
    }
  }
  .qianru {
    display: flex;
    justify-content: space-between;
  }
  .selector-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center; /* 垂直居中 */
  }
  .search-wrapper {
    display: flex;
  }
  .el-select {
    display: block;
    position: relative;
    position: relative;
  }
  .button-wrapper {
    display: flex;
    justify-content: flex-end; /* 靠右对齐 */
    align-items: center; /* 垂直居中 */
  }
}
</style>
